<template>
  <div class="index_page">
    <y-header />
    <div class="bg-wrap2">
      <y-choose :search-key="obj.mingcheng" />
      <div class="list-ctn" style="margin-bottom: 20px;">
        <div v-if="pageObj.list.length > 0" class="container">
          <div class="list">
            <ul class="clearfix">
              <one-sphere v-for="(obj, idx) in pageObj.list" :key="idx" :obj="obj" :idx="idx" />
            </ul>
          </div>
          <d-page :page="pageObj" @btnClick="getPage" />
        </div>
        <el-empty v-else description="空空如也" />
      </div>
    </div>
    <!-- <bottom /> -->
    <y-tap />
  </div>
</template>
<script>
import YHeader from '@/components/common/Header'
import YChoose from '@/components/common/SphereChoose.vue'
import DPage from '@/components/common/Page'
import YTap from '@/components/common/Top'
import { sphereList } from '~/api/course.js'
import { sphereChange } from '~/utils/commonfun.js'
import '@/assets/css/index.css'
import OneSphere from '@/pages/sphere/OneSphere.vue'
// import Bottom from '@/components/common/Bottom'

export default {
  components: {
    // Bottom,
    YHeader,
    YChoose,
    OneSphere,
    DPage,
    YTap
  },
  async asyncData(context) {
    const dataObj = {}
    dataObj.websiteInfo = context.store.state.websiteInfo
    const mingcheng = context.query.mingcheng || ''
    const initSearchObj = {
      pageCurrent: 1,
      pageSize: 20,
      mingcheng
    }
    console.log('initSearchObj', initSearchObj)
    try {
      const allData = await Promise.all([sphereList(initSearchObj)])
      // 全景分页
      dataObj.pageObj = allData[0]
      // console.log('pageObj', dataObj.pageObj)
      dataObj.obj = {
        pageCurrent: initSearchObj.pageCurrent,
        pageSize: initSearchObj.pageSize
      }
      return dataObj
    } catch (e) {
      context.error({ message: 'Data not found', statusCode: 404 })
    }
  },
  data() {
    return {
      // categoryId: '', // 当前分类ID
    }
  },
  head() {
    return {
      title: '全景中心-' + this.$store.state.websiteInfo.websiteName,
      meta: [
        {
          hid: 'keywords',
          name: 'keywords',
          content: this.$store.state.websiteInfo.websiteKeyword
        },
        {
          hid: 'description',
          name: 'description',
          content: this.$store.state.websiteInfo.websiteDesc
        }
      ]
    }
  },
  watch: {
    '$route'() {
      sphereChange(this)
      this.getCourse()
    }
  },
  created() {
    // const path = this.$route.path // 先获取路由路径
    // this.$router.push(path)
    // courseChange(this)
    // this.getCourse()
  },
  methods: {
    getCourse() {
      if (this.obj.mingcheng === '') {
        delete this.obj.mingcheng
      }
      // this.$nuxt.$loading.start()
      sphereList(this.obj).then(res => {
        // this.$nuxt.$loading.finish()
        if (res) {
          this.pageObj = res
        } else {
          this.pageObj = {}
        }
      }).catch(() => {
        // this.$nuxt.$loading.finish()
        this.$msgBox({
          content: '数据加载失败，请稍后重试',
          isShowCancelBtn: false
        })
      })
    },
    getPage(int) {
      // window.scrollTo(0, 0)
      this.obj.pageCurrent = int
      this.getCourse()
    }
  }
}
</script>
<style lang="scss" rel="stylesheet/scss">
.bg-wrap2 {
  min-height: calc(100vh - 150px );
}
</style>
